<template>
	<div class="wrapper">
		<top-bar>
			<template v-slot:title>
				{{ $t("Coin record") }}
			</template>
		</top-bar>
		<div class="container">
			<van-tabs
				v-model:active="active"
				title-inactive-color="#9C9DA6"
				title-active-color="#121314"
				sticky
				:offset-top="'.44rem'"
				@change="changeTab"
			>
				<van-tab
					v-for="item in record"
					:key="item.id"
					:title="$t(item.title)"
					:title-class="'record-tab'"
				>
					<component :is="item.component" />
				</van-tab>
			</van-tabs>
		</div>
	</div>
</template>
<script>
import TopBar from "../../components/TopBar/index.vue";
import TaskRecord from "../Task/record.vue";
import WithdrawRecord from "../Withdraw/record.vue";
import InviteRecord from "../Invite/record.vue";
import { inject, onMounted, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";

export default {
	components: {
		TopBar,
	},
	props: ["routerActive"],
	setup(props) {
		const vueState = inject("vueState");
		const record = [
			{
				id: 1,
				title: "Task",
				component: TaskRecord,
			},
			{
				id: 2,
				title: "Invite",
				component: InviteRecord,
			},
			{
				id: 3,
				title: "Withdrawal",
				component: WithdrawRecord,
			},
		];
		const state = reactive({
			active: Number(props.routerActive) || 0,
		});
		const changeTab = (title) => {
			window.trackEvent({
				pageTitle: "taskamountPage",
				ev: "clcikCategory",
				remarks: `Category:${record[title].title}`,
			});
		};
		const withdrawalControl = () => {
			if (!vueState.pageStyle.showWithdraw) {
				record.splice(-1, 1);
			}
		};
		onMounted(() => {
			vueState.EventEmitter.immediately(
				"afterRegist",
				withdrawalControl,
				vueState.pageStatus.afterRegist
			);
		});
		return {
			changeTab,
			record,
			...toRefs(state),
		};
	},
};
</script>
<style lang="less" scoped>
.wrapper {
	height: 100%;
	/deep/ .van-tab {
		line-height: 0.28rem;
		z-index: 5;
	}
	/deep/ .van-tabs,
	/deep/ .van-tab__pane {
		height: 100%;
	}
	/deep/ .van-tab--active {
		font-size: 0.16rem;
		font-family: DM Sans, DM Sans-Medium;
		font-weight: 500;
		color: #222222;
	}
	/deep/ .van-tabs__content {
		height: calc(100% - 0.48rem);
		overflow-y: auto;
	}
	/deep/ .van-swipe__track {
		overflow-y: auto;
		overflow-x: hidden;
	}
	/deep/ .van-tabs__line {
		// height: .06rem;
		// width:.28rem;
		// background: url(../../assets/images/tab_active.png) no-repeat center;
		// background-size: contain;
		width: 0.88rem;
		height: 0.36rem;
		background-color: #f5b53f;
		border-radius: 0.08rem;
	}
	/deep/ .van-tabs__wrap {
		height: 0.48rem;
		padding-bottom: 0.06rem;
		border-bottom: 0.01rem solid #ededef;
		box-shadow: 0 0.08rem 0.16rem 0 rgba(10, 36, 99, 0.02);
	}
	.container {
		height: 100%;
		background-color: white;
	}
}
</style>
